<script type="text/x-handlebars" id="application">
    <header>
    <nav class="navbar">
    <div class="container">
        <div class="navbar-header">
            {{#link-to 'index' class='navbar-brand'}}Github API{{/link-to}}
        </div>
        <div class="navbar-collapse">
            <ul class="nav navbar-nav">
                <li>{{#link-to 'users'}}Users{{/link-to}}</li>
            </ul>
        </div>
    </div>
    </nav>
    </header>

    {{outlet}}

    <footer>
    <div class="container">
        <div class="text-center">Github API</div>
    </div>
    </footer>
</script>

<script type="text/x-handlebars" id="index">
<div class="container">
<div class="jumbotron">
    <h1>Hello, world!</h1>
    <p>...</p>
    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
</script>

<script type="text/x-handlebars" id="users">
<div class="container">
    <section class="span12">
    <header>
    <h1>Users List</h1>
    </header>
    <nav class=""><ul class="container-fluid list-group">
    {{#each user in model}}
    <li class="col-xs-6 col-sm-4 col-md-3 col-lg-2 list-group-item">
    <section>
    <img style="width: 100%" class="img-responsive img-circle" {{bind-attr src=user.avatar_url}} />
    <h3 class="text-center">{{#link-to 'user' user.login}}{{user.login}}{{/link-to}}</h3>
    </section>
    </li>
    {{/each}}
    </ul></nav>
    </section>
</div>
</script>

<script type="text/x-handlebars" id="loading">
<div class="container">
    <div class="center-block">
    <div class="progress">
        <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
            <span class="sr-only">100% Complete</span>
        </div>
    </div>
    </div>
</div>
</script>

<script type="text/x-handlebars" id="user">
<div class="container">
    <div class="row">
    <section class="col-md-6">
    <header>
    <h3><small>User:</small> {{login}}</h3>
    <p><img class="img-responsive" {{bind-attr src=avatar_url}}/></p>
    <p><strong>Name: </strong>{{name}}</p>
    <p><strong>Company: </strong>{{company}}</p>
    <p><strong>Location: </strong>{{location}}</p>
    </header>
    <div>
        <p>Repos: {{#link-to 'repos'}} {{public_repos}} {{/link-to}}</p>
        <p>Gists: {{#link-to 'gists'}} {{public_gists}} {{/link-to}}</p>
        <p>Followers: {{#link-to 'followers'}} {{followers}} {{/link-to}}</p>
        <p>Following: {{#link-to 'following'}} {{following}} {{/link-to}}</p>
    </div>
    </section>

    {{outlet}}

    </div>
</div>
</script>

<script type="text/x-handlebars" id="user/loading">
<div class="container">
    <div class="center-block">
    <div class="progress">
        <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
            <span class="sr-only">100% Complete</span>
        </div>
    </div>
    </div>
</div>
</script>

<script type="text/x-handlebars" id="repos">
    <section class="col-md-6">
    <h3>Repos: </h3>
    <ul class="list-group">
        {{#each repo in model}}
        <li class="list-group-item">
        <h5>
            <a {{bind-attr href=repo.html_url}} target="_blank">{{repo.name}}</a>
            <small class="pull-right">Forks: {{repo.forks}}&nbsp;&nbsp;Watchers: {{repo.watchers}}</small>
        </h5>
        </li>
        {{/each}}
    </ul>
    </section>
</script>

<script type="text/x-handlebars" id="gists">
    <section class="col-md-6">
    <h3>Gists: </h3>
    <ul class="list-group">
        {{#each gist in model}}
        <li class="list-group-item">
        <h5>
            <a {{bind-attr href=gist.html_url}} target="_blank">{{gist.filename}}</a>
            <small class="pull-right">Language: {{gist.language}}</small>
        </h5>
        </li>
        {{/each}}
    </ul>
    </section>
</script>

<script type="text/x-handlebars" id="followers">
    <section class="col-md-6">
    <h3>Followers: </h3>
    <ul class="list-group">
        {{#each follower in model}}
        <li class="list-group-item">
            <a {{bind-attr href=follower.html_url}} target="_blank">{{follower.login}}</a>
        </li>
        {{/each}}
    </ul>
    </section>
</script>

<script type="text/x-handlebars" id="following">
    <section class="col-md-6">
    <h3>Following: </h3>
    <ul class="list-group">
        {{#each following in model}}
        <li class="list-group-item">
            <a {{bind-attr href=following.html_url}} target="_blank">{{following.login}}</a>
        </li>
        {{/each}}
    </ul>
    </section>
</script>


